<!-- 左侧菜单模板 -->
<template>
  <!-- 菜单栏 -->
  <div
    class="menu w-[200px] bg-gray-800"
    :class="{ close: menuService.close.value }"
  >
    <div class="logo flex justify-center text-gray-300 items-center p-4">
      <el-icon :size="20" class="mr-2"><Flag /></el-icon>
      <span class="text-md">天下无诈</span>
    </div>
    <div class="container">
      <dl>
        <dt
          @click="$router.push('/')"
          :class="{ 'bg-violet-600 text-white p-3': $route.name == 'home' }"
        >
          <section class="flex justify-center items-center gap-1">
            <el-icon :size="20"><HomeFilled /></el-icon>
            <span class="text-md">主页</span>
          </section>
        </dt>
      </dl>
      <dl
        v-for="(menu, index) of menuService.menus.value"
        :key="index"
      >
        <dt @click="menuService.toggleParentMenu(menu)">
          <section>
            <span class="text-md">{{ menu.title }}</span>
          </section>
          <section>
            <el-icon v-if="!menu.isClick"><ArrowDown /></el-icon>
            <el-icon v-else><ArrowUp /></el-icon>
          </section>
        </dt>
        <dd :class="menu.isClick ? 'block' : 'hidden'">
          <div
            :class="{ active: childMenu.isClick }"
            v-for="(childMenu, key) of menu.children"
            :key="key"
            @click="$router.push({ name: childMenu.routeName })"
          >
            {{ childMenu?.title }}
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script setup lang="ts">
import menuService from "@/composables/menu";
import { watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

menuService.init();
watch(route, () => menuService.setCurrentMenu(route), { immediate: true });
</script>

<style scoped lang="scss">
.menu {
  .container {
    dl {
      @apply text-gray-300 text-sm cursor-pointer;
      dt {
        @apply text-base p-4 flex justify-between items-center;
      }
      dd {
        div {
          @apply  py-3 my-2 pl-4 text-white rounded-md cursor-pointer hover:bg-violet-500 bg-gray-400;
          &.active {
            @apply bg-violet-700;
          }
        }
      }
    }
  }

  &.close {
    width: 0;
    @apply hidden;
  }
}
</style>
